<script lang="jsx" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import useResetTableRef from '@/hooks/common/resetTableRef';
import { downloadMiFile } from '@/service/api/modules/engineering-manage/engineering-data-inquiry';

const commonSearchRef = ref(null);
const [searchParams, searchParamsReset] = useResetTableRef({
  moduleNo: null,
  moduleNoState: '8'
});

const stateLabels = {
  0: '编写',
  1: '更改',
  2: '待处理',
  3: '编写中',
  4: '暂停',
  5: '已回退',
  6: '反审核',
  7: '审核中',
  8: '已上网',
  9: '完成',
  10: '取消',
  11: '外部ECN',
  12: '外部ECN待处理',
  13: '内部ECN',
  19: '样板转生产',
  20: 'ENC更改',
  25: '报废',
  27: '申请',
  28: '入库',
  29: '发放',
  34: '归还',
  35: '接收',
  36: '审核',
  37: '确认',
  100: 'PPC审核'
};

const tableRef = ref(null);
const formList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4,
    placeholder: '请输入生产型号',
    showTime: true
  },
  {
    type: 'select',
    key: 'moduleNoState',
    label: '状态',
    placeholder: '请选择状态',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4,
    selectOptions: getStateList()
  }
];

function getTextColor(v) {
  let state = Number(v);
  if (state === 1409171046440000 || state === 1609131645440000)
    // 流程初审
    state = 2;
  else if (state === 1409171046540000 || state === 1409191117540000)
    // 流程复审
    state = 3;
  else if (state === 1610130953480000 || state === 1409191117380000)
    // 签名
    state = 4;

  switch (Number(state)) {
    case -1:
      return '#FF0000';
    case 0:
      return '#0080FF';
    case 1:
      return '#FFA500';
    case 2:
      return '#FF8000';
    case 3:
      return '#B15BFF';
    case 4:
      return '#73BF00';
    case 5:
      return '#8E8E8E';
    case 6:
      return '#BEBEBE';
    case 7:
      return '#FF0000';
    case 8:
      return '#4682B4';
    case 9:
      return '#0000FF';
    case 10:
      return '#007500';
    default:
      return '#0000FF';
  }
}

function getStateList() {
  return Object.entries(stateLabels).map(([key, value]) => {
    if (key === 8) {
      return {
        label: '已上网',
        value: key
      };
    }
    return {
      label: value,
      value: key
    };
  });
}

const leftColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'state',
    dataIndex: 'state',
    title: '状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    customFilterDropdown: true,
    width: 130,
    onFilter: (value, record) => {
      let state = Number(record.state);
      if (state === 1409171046440000 || state === 1609131645440000)
        // 流程初审
        state = 2;
      else if (state === 1409171046540000 || state === 1409191117540000)
        // 流程复审
        state = 3;
      else if (state === 1610130953480000 || state === 1409191117380000)
        // 签名
        state = 4;
      if (value) {
        return Number(value) === Number(state);
      }
      return true;
    },
    customRender: ({ record }) => {
      let state = Number(record.state);

      if (state === 1409171046440000 || state === 1609131645440000)
        // 流程初审
        state = 2;
      else if (state === 1409171046540000 || state === 1409191117540000)
        // 流程复审
        state = 3;
      else if (state === 1610130953480000 || state === 1409191117380000)
        // 签名
        state = 4;

      if (state === 8) {
        return (
          <div class="h-full w-full" title="已上网" style={{ color: getTextColor(record.state) }}>
            已上网
          </div>
        );
      }
      return (
        <div class="h-full w-full" title={stateLabels[state] || ''} style={{ color: getTextColor(record.state) }}>
          {stateLabels[state] || ''}
        </div>
      );
    }
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return <span class="fonw-800 color-#646cff">{record.moduleNo}</span>;
    }
  },
  {
    key: 'pnType',
    dataIndex: 'pnType',
    title: '类型',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'prodType',
    dataIndex: 'prodType',
    title: '产品类型',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'surfTrea1',
    dataIndex: 'surfTrea1',
    title: '表面处理1',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'peType',
    dataIndex: 'peType',
    title: '板类型',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'peDifficulty',
    dataIndex: 'peDifficulty',
    title: '开发等级',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'peState',
    dataIndex: 'peState',
    title: '生产稿状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'peSpecial',
    dataIndex: 'peSpecial',
    title: '特殊周期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'pemark',
    dataIndex: 'pemark',
    title: '水印',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'peRemark',
    dataIndex: 'peRemark',
    title: '工程备注',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'targetName',
    dataIndex: 'targetName',
    title: '终端客户',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'custNo',
    dataIndex: 'custNo',
    title: '客户编码',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'custProdNo',
    dataIndex: 'custProdNo',
    title: '客户型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'custProdNoAdd',
    dataIndex: 'custProdNoAdd',
    title: '物料号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'peActive',
    dataIndex: 'peActive',
    title: 'PE状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130,
    customRender: ({ record }) => {
      return record.peactive ? '有效' : '过期';
    }
  },
  // {
  //   key: 'info',
  //   dataIndex: 'info',
  //   title: '操作内容',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   width: 130
  // },
  {
    key: 'activeRemark',
    dataIndex: 'activeRemark',
    title: '操作备注',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'mktActive',
    dataIndex: 'mktActive',
    title: 'MIKT投产',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130,
    customRender: ({ record }) => {
      return record.mktactive ? '是' : '否';
    }
  },
  {
    key: 'weight',
    dataIndex: 'weight',
    title: '单重',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    // title: <SortTableTitle title="最后修改时间"></SortTableTitle>,
    title: '最后修改时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return dayjs(record.updateDate).format('YYYY-MM-DD HH:mm:ss');
    }
  }
];
const currentRow = ref(null);
function handleLeftTableRowClick(row) {
  currentRow.value = row;
}

function search() {
  tableRef.value.getData(1);
}

function reset() {
  searchParamsReset();
  search();
}

const isLocalHost = window.location.hostname === 'localhost';
const visible = ref(false);
const previewData = ref(null);
const previewTitle = ref(null);

// MI下载
function handleMiDownload(data) {
  let row;
  if (!data) {
    row = currentRow.value;
  } else {
    row = data.record;
  }

  downloadMiFile(
    {
      prodId: row.prodId
    },
    row.moduleNo
  );
  data.hidePopup();
}

// MI预览
function handleMiPreview(data) {
  let row;
  if (!data) {
    row = currentRow.value;
  } else {
    row = data.record;
  }
  visible.value = true;
  previewTitle.value = `${row.moduleNo}MI文件.pdf 预览`;
  previewData.value = `${isLocalHost ? 'http://192.168.166.169:9999/dev-api/' : '/dev-api/'}erpsyncmes/mi/print/getMiPdf?prodId=${row.prodId}`;
  data && data.hidePopup();
}

function handleDesign(data) {
  let row;
  if (!data) {
    row = currentRow.value;
  } else {
    row = data.record;
  }

  if (!row) {
    window.$message.error('请选择一条数据');
    return;
  }

  let miData = JSON.parse(sessionStorage.getItem('mi-data'));
  if (miData) {
    miData[row.prodId] = row;
  } else {
    miData = {};
    miData[row.prodId] = row;
  }
  sessionStorage.setItem('mi-data', JSON.stringify(miData));

  data && data.hidePopup();
  window.open(`/mi-design/engineering-design?prodId=${row.prodId}`, '_blank');
}

function handleView(data) {
  let row;
  if (!data) {
    row = currentRow.value;
  } else {
    row = data.record;
  }

  if (!row) {
    window.$message.error('请选择一条数据');
    return;
  }

  let miData = JSON.parse(sessionStorage.getItem('mi-data'));
  if (miData) {
    miData[row.prodId] = row;
  } else {
    miData = {};
    miData[row.prodId] = row;
  }
  sessionStorage.setItem('mi-data', JSON.stringify(miData));

  data && data.hidePopup();
  window.open(`/mi-design/engineering-design?prodId=${row.prodId}`, '_blank');
}
</script>

<template>
  <div class="h-full min-h-500px flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="formList"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <Table
      ref="tableRef"
      v-model:searchParams="searchParams"
      :column="leftColumn"
      :show-row-selection="false"
      row-key="prodId"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/erpsyncmes/Mi/findModuleNo"
      :auto-generate-uuid="false"
      class="h-full"
      :default-expand-all-rows="true"
      @table-row-click="handleLeftTableRowClick"
    >
      <template #title>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleDesign(null)">
          <template #icon>
            <SvgIcon local-icon="engineering-design" class="ml-4px mr-4px text-16px" />
          </template>
          工程设计
        </AButton>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleView(null)">
          <template #icon>
            <SvgIcon local-icon="view" class="ml-4px mr-4px text-16px" />
          </template>
          工程查看
        </AButton>
        <!--
 <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleView(null)">
          <template #icon>
            <SvgIcon local-icon="unlock" class="ml-4px mr-4px text-16px" />
          </template>
          解锁编辑状态
        </AButton>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleView(null)">
          <template #icon>
            <SvgIcon local-icon="tool" class="ml-4px mr-4px text-16px" />
          </template>
          MI状态控制开关
        </AButton>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleView(null)">
          <template #icon>
            <SvgIcon local-icon="edit" class="ml-4px mr-4px text-16px" />
          </template>
          更改备注信息
        </AButton>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleView(null)">
          <template #icon>
            <SvgIcon local-icon="edit-2" class="ml-4px mr-4px text-16px" />
          </template>
          转老型号设计
        </AButton>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleView(null)">
          <template #icon>
            <SvgIcon local-icon="edit-3" class="ml-4px mr-4px text-16px" />
          </template>
          转新型号设计
        </AButton>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleView(null)">
          <template #icon>
            <SvgIcon local-icon="clear" class="ml-4px mr-4px text-16px" />
          </template>
          清除MI
        </AButton>
-->
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleMiPreview(null)">
          <template #icon>
            <SvgIcon local-icon="preview" class="ml-4px mr-4px text-16px" />
          </template>
          预览
        </AButton>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleMiDownload(null)">
          <template #icon>
            <SvgIcon local-icon="download" class="ml-4px mr-4px text-16px" />
          </template>
          预览
        </AButton>
      </template>
      <template #contextmenuPopup-orter="{ args }">
        <li class="popup-item" @click="handleMiDownload(args)">
          <SvgIcon local-icon="download" class="text-16px" />
          下载
        </li>
        <li class="popup-item" @click="handleMiPreview(args)">
          <SvgIcon local-icon="preview" class="text-16px" />
          预览
        </li>
        <li class="popup-item" @click="handleDesign(args)">
          <SvgIcon local-icon="engineering-design" class="text-16px" />
          工程设计
        </li>
        <li class="popup-item" @click="handleView(args)">
          <SvgIcon local-icon="view" class="text-16px" />
          工程查看
        </li>
        <li class="popup-item" @click="handleView(args)">
          <SvgIcon local-icon="examine" class="text-16px" />
          审核
        </li>
        <!--
 <li class="popup-item" @click="handleView(args)">
          <SvgIcon local-icon="unlock" class="text-16px" />
          解锁编辑状态
        </li>
        <li class="popup-item" @click="handleView(args)">
          <SvgIcon local-icon="tool" class="text-16px" />
          MI状态控制开关
        </li>
        <li class="popup-item" @click="handleView(args)">
          <SvgIcon local-icon="edit" class="text-16px" />
          更改备注信息
        </li>
        <li class="popup-item" @click="handleView(args)">
          <SvgIcon local-icon="edit-2" class="text-16px" />
          转老型号设计
        </li>
        <li class="popup-item" @click="handleView(args)">
          <SvgIcon local-icon="clear" class="text-16px" />
          MI清除
        </li>
-->
      </template>
    </Table>

    <FileViwer v-model:visible="visible" :url="previewData" type="pdf" pdf-use-iframe :title="previewTitle" />
  </div>
</template>

<style lang="scss" scoped></style>
